<script>
export default {
  data() {
    return {
      param: {
        content: {
          keyword: null,
          pageSize: 10,
          pageNo: 1,
          meterId: null,
          dataType: null,
          gatewayId: null,
          health: null,
          virtual: null,
        }
      },
      tableList: {
        item: null,
        data:[],
        total: 0,
        hidden: false
      },
      meterList: {data: []},
      dataTypeList: {
        data: [
          {name: '所有', id: null},
          {name: '过程', id: 'PROCESS'},
          {name: '累积', id: 'CUMULATE'}
        ]
      },
      gatewayList: {data: []},
      virtualList: {
        data: [
          {name: '所有', id: null},
          {name: '虚拟', id: 'Y'},
          {name: '真实', id: 'N'}
        ]},
      healthList: {
        data: [
          {name: '所有', id: null},
          {name: '健康', id: true},
          {name: '不健康', id: false}
        ]
      }
    }
  },
  mounted() {
    this.fetchData()
    this.fetchBaseData()
  },
  methods: {
    queryButtonClick: function () {
      this.fetchData()
    },
    fetchBaseData: function () {
      this.$axios({url:'/ems/client/base/gateway/list',data: this.param}).then((content) => {
        this.gatewayList.data = content.list
        this.gatewayList.data.unshift({id: null, name: '所有'})
      })
      this.$axios({url:'/ems/client/base/meter/list',data: this.param}).then((content) => {
        this.meterList.data = content.list
        this.meterList.data.unshift({id: null, name: '所有'})
      })
    },
    fetchData: function () {
      this.$axios({url:'/ems/client/base/point/list',data: this.param}).then((content) => {
        const list = content.list;
        list.forEach(function (item) {
          if (item.nameInfo) {
            item.nameInfo = JSON.parse(item.nameInfo)
          }
          if (item.satelliteLocation) {
            item.satelliteLocation = JSON.parse(item.satelliteLocation)
          }else {
            item.satelliteLocation = {lng: '', lat: '', area: '', zoom: 18}
          }
        })
        this.tableList.data = list
        this.tableList.total = content.total
      });
    },

    tableItemDetail: function (item) {
      this.tableList.hidden = true
      this.tableList.item = item
    },
    pageChange: function (p) {
      this.param.content.pageNo = p
      this.fetchData()
    }
  },
  components: {
    addPoint: () => import("@/components/system-base/modules/addPoint.vue")
  }
}
</script>

<template>
  <div>
    <div v-if="!tableList.hidden">
      <el-row>
        <el-col :span="24">
          <label>名称：</label><el-input v-model="param.content.keyword" placeholder="请输入内容" style="width: 200px"></el-input>
          &nbsp;<label>选择采集器：</label>
          <el-select v-model="param.content.gatewayId" placeholder="请选择采集器">
            <el-option v-for="item in gatewayList.data" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          &nbsp;<label>选择仪表：</label>
          <el-select v-model="param.content.meterId" placeholder="请选择仪表">
            <el-option v-for="item in meterList.data" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          &nbsp;<label>数据类型：</label>
          <el-select v-model="param.content.dataType" placeholder="请选择数据类型">
            <el-option v-for="item in dataTypeList.data" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          &nbsp;<label>健康状态：</label>
          <el-select v-model="param.content.health" placeholder="请选择数据类型">
            <el-option v-for="item in healthList.data" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-button type="primary" plain @click="queryButtonClick">查询</el-button>
          &nbsp;
          <el-button type="primary" plain @click="tableItemDetail()">添加采集点</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="margin-top: 20px;">
          <el-table
              :data="tableList.data"
              border
              style="width: 100%">
            <el-table-column align="center" prop="id"  label="ID" width="150"></el-table-column>
            <el-table-column  prop="name"  label="名称" ></el-table-column>
            <el-table-column  prop="meterName"  label="所属水表" width="150"></el-table-column>
            <el-table-column  prop="dataTypeDesc"  label="数据类型" width="150"></el-table-column>
            <el-table-column  prop="gatewayName"  label="关联采集器" ></el-table-column>
            <el-table-column  prop="lastUploadRealValueStr"  label="最后上传值" ></el-table-column>
            <el-table-column  prop="lastUploadTimeStr"  label="最后上传时间" ></el-table-column>
            <el-table-column  prop="stateDesc"  label="使用状态" ></el-table-column>
            <el-table-column  prop="healthDesc"  label="采集状态" >
              <template scope="scope">
                <i :style="!scope.row.health?'color:red':''" style="font-style: normal;">{{scope.row.healthDesc}}</i>
              </template>
            </el-table-column>
            <el-table-column  prop="virtualDesc"  label="类型" ></el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
              <template slot-scope="scope">
                <el-button @click="tableItemDetail(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row style="text-align: right;">
        <el-pagination background layout="prev, pager, next" :total="tableList.total" :page-size="param.content.pageSize" @current-change="pageChange"/>
      </el-row>
    </div>
    <div v-if="tableList.hidden">
      <addPoint :tableList="tableList" :fetchTableData="fetchData"/>
    </div>
  </div>
</template>

<style>

</style>
